<template>
  <div class="system-login">
  <!-- <video  loop autoplay muted >
    <source  src="/static/home_kv.mp4" type="video/mp4" >
  </video> -->
       <div class="content">
         <el-card class="box-card">
            <div slot="header" class="clearfix">
               <img src="/static/images/components/logo2.png" alt="" style="width:40px">
                <span>用户登录</span>
            </div>
            <el-form ref="form" :model="form" :rules="rules">
              <el-form-item prop="userName">
                 <el-input  prefix-icon="el-icon-user"  v-model="form.userName" placeholder="请输入用户名"></el-input>
              </el-form-item>
              <el-form-item prop="passWord">
                  <el-input prefix-icon="el-icon-unlock"  @keyup.enter.native="submit"
                  v-model="form.passWord" placeholder="请输入密码" type="password"></el-input>
              </el-form-item>
              <el-form-item style="margin-bottom:0">
                <el-button type="primary" @click="submit" style="width:100%" :loading="loading">
                  <span v-if="loading">登录中...</span>
                  <span v-else>登录</span>
                </el-button>
              </el-form-item>
            </el-form>
         </el-card>
       </div>
  </div>
</template>

<script>
import { GVerify } from '@/utils/checkCode';
export default {
  data() {
    return {
      valid: false,
      loading: false,
      telVerifyCode: '',
      show: false,
      form: {
        userName: '',
        passWord: '',
        validCode: ''
      },
      rules: {
        userName: [
          { required: true, message: '请输入用户名', trigger: 'blur' }
          // { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        passWord: [
          { required: true, message: '请输入密码', trigger: 'blur' }
          // { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ]
        // validCode: [
        //   { required: true, validator: validateCodes, trigger: 'blur' }
        // ]
      }

    };
  },
  created() {
    // this.refresh();
    // this.openRadonCode();
    window.localStorage.removeItem('vuex');
  },
  mounted() {
    this.show = true;
  },
  methods: {
    openRadonCode() {
      this.$nextTick(() => {
        this.telVerifyCode = new GVerify({
          id: 'telVerifyContainer',
          canvasId: 'telCerifyCanvas',
          type: 'blend'
        });
      });
    },
    /**
     * 密码加密
     * @param {String} password   -密码
     * @returns {String}          -返回加密后的密码
     */
    doSM3(password) {
      /** eslint-disable */
      let msgData = window.CryptoJS.enc.Utf8.parse(password);
      const sm3keycur = new window.SM3Digest();
      msgData = sm3keycur.GetWords(msgData.toString());
      sm3keycur.BlockUpdate(msgData, 0, msgData.length);
      const c3 = new Array(32);
      sm3keycur.DoFinal(c3, 0);
      const hashHex = sm3keycur.GetHex(c3).toString();
      return hashHex.toUpperCase();
    },
    submit(form) {
      this.$refs.form.validate((valid) => {
        if (valid) {
          const params = {
            url: '/api/login',
            type: 'post',
            params: {
              loginpw: this.doSM3(this.form.passWord),
              loginname: this.form.userName
            }
          };
          // 1, '登录成功', authToken;
          // 2, '首次登录需要修改密码！', authToken;
          // 3, String.format('密码将在%s后过期，请修改及时密码！', date), authToken;
          // 4, '账号已过期！',
          this.loading = true;
          this.$ajax(params).then(resp => {
            this.loading = false;
            const { success } = resp;
            if (success) {
              this.$router.push({
                path: '/map'
              });
            }
          });
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    }
  }
};
</script>

<style lang="scss">
.system-login{
   height: 100%;
   position:relative;
   background:url('/static/images/datacollect/login.png') no-repeat;
   background-size:100% 100%;  
   overflow: hidden;
   .title{
    font-size: 32px;
    font-weight: bold;
    color: #FFFFFF;
    display: flex;
    padding: 50px 40px;
    align-items: center;
    span{
      margin-left: 10px;
    }
   }
   .el-card{
    background: white;
    // border: 1px solid #01b9fe;
    // box-shadow: inset 0 0 50em 4em #0a73bf;
   }
   .el-card__header{
    border-bottom:0;
   }
   .el-card__body {
    padding-bottom: 50px;
   }
   .clearfix{
    text-align: center;
    display: flex;
    flex-direction: column;
    /* justify-content: center; */
    align-items: center;
    span{
      font-size: 24px;
      font-weight: bold;
      color: black;
      padding-top: 20px;
    }
   }
   .el-form-item {
    margin-bottom: 35px;
   }
   .content{
     width: 400px;
     height: 373px;
     position: absolute;
     left:75%;
     top:50%;
     transform: translate(-50%, -50%);
     .el-input-group__append{
       padding: 0;
     }
   }
}
</style>
